<template>
    <!-- 
        为什么要单独创建一个文件，
            方便复用、维护、修改
            方便对于每一个ui组件库的理解

         v-model：选中的值
         size：大小
         options：每一个选项
         :key
         :label
         :value
     -->

    <!-- 然后处理动态样式 
           （1）placeholder: 需要 父组件向子组件 传递数据
            (2) icon =>自己封装 下拉选择 =》ui图  因为效果在 element ui中没有
        -->

    <div class="wselect">
        <!-- 我怎么知道选中了值  ==》 去组件库查看属性，有一个change方法。 
            change，选中值发生变化时触发 val，目前的选中值 -->
        <div class="caidan"><i class="iconfont icon-caidan"></i></div>

        <el-select @change="change" v-model="value" class="m-2" :placeholder="placeholder"
         :disabled="disabled"  size="large">
            <el-option v-for="item in optionsDatas" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const value = ref('')

defineProps({
    placeholder: {
        type: String,
        default: '请选择'
    },
    optionsDatas: {
        type: Object || Array,
        default: [
            {
                value: 'Option1',
                label: 'Option1',
            },
            {
                value: 'Option2',
                label: 'Option2',
            },
            {
                value: 'Option3',
                label: 'Option3',
            }]
    },
    disabled: {
        type: Boolean,
        default: false
    },
    value: {
        type: String,
    }
})

// 在子组件中给父组件传递数据
let emits = defineEmits(['getSelectItem'])   // 要定义要传递的方法

const change = (val: any) => {
    // console.log(val, 2222);

    emits('getSelectItem', val);   // emits传递（方法名，值）
}


</script>

<style scoped lang="scss">
.wselect {
    margin: 5px 10px;
    position: relative;

    .caidan {
        position: absolute;
        top: -10px;
        right: -5px;
        background: rgb(61, 189, 239);
        color: #fff;
        z-index: 1000;
        height: 18px;
    }
}
</style>